<template>
  <div class="container">
    <div class="header">
      <span>用户列表</span>
    </div>
    <table>
      <tr>
        <th>头像</th>
        <th>账号</th>
        <th>昵称</th>
        <th>编号</th>
        <th>性别</th>
        <th>邮箱</th>
        <th>电话</th>
        <th>编辑</th>
      </tr>
      <tr v-for="i in list" :key="i._id">
        <td><img :src="i.headerimg" alt="" /></td>
        <td>{{ i.username }}</td>
        <td>{{ i.nick }}</td>
        <td>{{ i._id }}</td>
        <td> {{ g(i.gender) }}</td>
        <td>{{ i.mail }}</td>
        <td>{{ i.telephone }}</td>
        <td>
          <div style="width:130px">
            <el-button type="primary" size="small" @click="onEdit(i)">编辑</el-button>
            <el-button type="primary" size="small" @click="onDelete(i._id)">删除</el-button>
          </div>
        </td>
      </tr>
    </table>

    <div class="bigbox" v-if="dialogFormVisible">
      <div class="usercard">
        <h2>修改用户个人信息</h2>
        <img :src="Headerimg" alt="头像">
        <form>
          <h4>账户ID：{{ _id }}</h4>
          <div class="listbox">
            <label>昵&emsp;&emsp;称：</label>
            <input v-model="nick" placeholder="昵称" />
          </div>
          <div class="listbox">
            <label>性&emsp;&emsp;别：</label>
            <el-radio-group v-model="gender" style="width:205px;">
              <el-radio label="0" size="large" style="width:50px;">女</el-radio>
              <el-radio label="1" size="large" style="width:50px;">男</el-radio>
              <el-radio label="2" size="large" style="width:50px;">保密</el-radio>
            </el-radio-group>
          </div>
          <div class="listbox">
            <label>联系电话：</label>
            <input v-model="telephone" type="telephone" placeholder="联系电话" />
          </div>
          <div class="listbox">
            <label>邮&emsp;&emsp;箱：</label>
            <input v-model="mail" type="mail" placeholder="邮箱" />
          </div>
          <div class="form_item">
            <el-button @click="btnlogin()">确认修改</el-button>
            <el-button @click="(dialogFormVisible = false)">取消修改</el-button>
          </div>
        </form>
      </div>

    </div>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { userList, xguserlist, userDelete } from '@/api/user.js'
import { ref, onMounted } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter();
const Headerimg = ref('/img/logo.png')
const _id = ref('')
const nick = ref('')
const gender = ref('')
const telephone = ref('')
const mail = ref('')
const list = ref([''])
const username = ref("")

const dialogFormVisible = ref(false)
const onDelete = async (_id) => {
  let data = await userDelete(_id)
  let yesandno = confirm("确认删除此用户吗？")
  if (yesandno == true) {
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
      alert(resultInfo)
      UserList()
    } else {
      alert(resultInfo)
      return
    }
  } else {
    ElMessage({
      message: '您取消了删除',
      grouping: true,
      type: 'success',
    })
  }
}
const onEdit = (user) => {
  console.log(user);
  Headerimg.value = user.headerimg
  _id.value = user._id
  // username.value = user.username
  nick.value = user.nick
  mail.value = user.mail
  telephone.value = user.telephone
  gender.value = user.gender
  dialogFormVisible.value = true
  console.log('编辑显示');
}
//修改用户信息
const btnlogin = async () => {
  let yesandno = confirm("确认修改此用户的个人信息吗？")
  if (yesandno == true) {
    let data = await xguserlist(_id.value, nick.value, gender.value, telephone.value, mail.value)
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
      alert(resultInfo)
      dialogFormVisible.value = false
      UserList()
    } else {
      alert(resultInfo)
      return
    }
  } else {
    dialogFormVisible.value = false
    ElMessage({
      message: '您取消了修改',
      grouping: true,
      type: 'success',
    })
  }
}
//性别显示
const g = (g) => {
  let gender = ""
  if (g == 0) {
    gender = "女"
  } else if (g == 1) {
    gender = "男"
  } else {
    gender = "保密"
  }
  return gender
}

//用户列表
const UserList = async () => {
  let data = await userList()
  let { resultCode, resultInfo } = data
  if (resultCode == 1) {
    list.value = resultInfo.list
  }
}
onMounted(() => {
  UserList()
})
</script>
<style scoped lang="scss">
.container {
  text-align: center;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(223, 222, 222);
    height: 50px;
    width: 100%;

    span {
      margin-left: 20px;
    }
  }

  //列表
  table {
    margin: 0 auto;
    min-width: 800px;
    width: 90%;
    border: 0;
    border-left: 1px solid rgb(224, 223, 223);

    tr {
      text-align: center;
      
      th {
        padding: 17px 0;
        border-bottom: 1px solid rgb(224, 223, 223);
        border-right: 1px solid rgb(224, 223, 223);
        width: 10%;
      }
      td {
        height: 35px;
        border-bottom: 1px solid rgb(224, 223, 223);
        border-right: 1px solid rgb(224, 223, 223);
      }
    }

    img {
      width: 80px;
      border-radius: 50%;
      margin: 10px;
      display: inline-block;
    }
  }

  //弹框
  .usercard {
    margin: 0 auto;
    width: 500px;
    border-radius: 20px;
    border: 1px solid #bbb;
    // height: 800px;
    text-align: center;

    img {
      margin-top: 10px;
      border-radius: 50%;
      width: 100px;
      height: 100px;
      border: 1px solid #bbb;
    }

    .listbox {
      width: 100%;
      height: 60px;

      label {
        display: inline-block;
        margin-left: -20px;
        width: 100px;
        text-align: right;
        font-size: 18px;
      }

      .el-cascader {
        border: 0px;
      }

      input {
        border: 0px;
        border-bottom: 1px solid #bbb;
        width: 200px;
        text-align: center;
      }
    }

    .form_item {
      margin-bottom: 30px;
    }
  }
}




//title
</style>